import React, { useState } from 'react';
import { Button, Form, Input, Row, Col, Card } from 'antd';
import './conference.css';
import ItDetail from '../../components/itDetail/ItDetail.jsx'
import {useNavigate} from 'react-router-dom'
function Conference(props) {
    const [itSupport, setItSupport] = useState(null); // null表示未选择，"needed"表示需要，"notNeeded"表示不需要
    const [showItDetail, setShowItDetail] = useState(false);
    const navigate = useNavigate()
    const onFinish = values => {
        console.log('Success:', {
            ...values,
            conferenceIT: itSupport // 将IT支持选项合并到表单数据
        });
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    const handleItSupportChange = (value) => {
        setItSupport(value);
    };

    return (
        <div className='conference'>
            <h3 style={{marginBottom:'20px'}}>会议服务</h3>
            {showItDetail&&<ItDetail setShowItDetail={setShowItDetail}/>}
            <Form
                name="basic"
                labelCol={{
                    xs: { span: 6 },
                    sm: { span: 8 }
                }}
                wrapperCol={{
                    xs: { span: 18 },
                    sm: { span: 6 }
                }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="会议"
                    name="conference"
                    rules={[{ required: true, message: '请选择会议!' }]}
                >
                    <div style={{ color: '#1890ff', fontSize: '16px' }}
                    onClick={()=>{navigate('/addpre')}}
                    >+添加</div>
                </Form.Item>

                <Form.Item
                    label="会议主题"
                    name="conferenceTheme"
                    rules={[{ required: true, message: '请输入会议主题!' }]}
                >
                    <Input placeholder='请输入' style={{border:'none',outline:'none'}}/>

                </Form.Item>

                <Form.Item
                    label="与会人员"
                    name="conferencePeople"
                    rules={[{ required: true, message: '请输入与会人员!' }]}
                >
                    <Input placeholder='请选择' style={{border:'none',outline:'none'}}/>
                </Form.Item>

                <Form.Item
                    label="IT全程支持"
                    name='itsup'
                    // required
                    // validateStatus={itSupport === null ? 'error' : ''}
                    // help={itSupport === null ? '请选择!' : ''}
                    rules={[{ required: true, message: '请选择!' }]}
                >
                    <Row gutter={8}>
                        <Col>
                            <Button
                                type={itSupport === 'needed' ? 'primary' : 'default'}
                                onClick={() => handleItSupportChange('needed')}
                            >
                                需要
                            </Button>
                            <Button
                                type={itSupport === 'notNeeded' ? 'primary' : 'default'}
                                onClick={() => handleItSupportChange('notNeeded')}
                                style={{ marginLeft: 8 }}
                            >
                                不需要
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
                <Card style={{ width: 300 }}>
                    <p style={{fontSize:'12px'}}>所有会议IT会在会前检查设备和网络，确保正常使

                        用，如需T全程现场支持请选择需要。<span style={{color:'#1890ff'}}
                        onClick={()=>setShowItDetail(true)}>详情</span></p>


                </Card>
                <Form.Item
                    label="会议服务"
                    name="conferenceService"
                >
                    <div style={{ color: '#1890ff', fontSize: '16px' }}
                    onClick={()=>{navigate('/conserve')}}
                    >+添加</div>
                </Form.Item>
                <Card style={{ width: 300 }}>
                    <p style={{fontSize:'12px'}}>该城市会议室不提供会务人员现场服务</p>

                </Card>
                <Form.Item
                    label="备注"
                    name="conferenceRemark"
                >
                    <Input placeholder='请输入'/>
                </Form.Item>

                <Form.Item wrapperCol={{
                    xs: { span: 24, offset: 0 },
                    sm: { span: 16, offset: 8 }
                }}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Conference;